<template>
  <div class="demo-form">
    <van-form label-width="120px" input-align="right">
      <van-radio-dict :data="sexData" :keyValue="keyValue" @dictChange="handleChange" v-model="baseForm1.sex" label="性别" />
      <van-select-dict :data="nationData" :keyValue="keyValue" @dictChange="handleChange" label="民族" v-model="baseForm1.nation"  placeholder="请选择民族"></van-select-dict>
      <van-cascader-dict :treeData="areaTreeData" :keyValue="keyValue" @dictChange="handleChange" delChildren :fieldNames="{text: 'deptName', idField: 'deptId', value: 'deptId', children: 'children'}"  label="所属地区" title="地区选择" placeholder="请选择所属地区" v-model="baseForm1.area" ></van-cascader-dict>
      <van-checkbox-dict :data="colorData" :keyValue="keyValue" @dictChange="handleChange" v-model="baseForm1.colors" label="喜爱的颜色" placeholder="请选择喜爱的颜色"/>
      <van-multiple-select-dict :format="sportFormat" :data="sportsData" :keyValue="keyValue" @dictChange="handleChange" height="50vh" v-model="baseForm1.sports" dictType="SPORTS" label="喜爱的运动" placeholder="请选择喜爱的运动"/>
    </van-form>

    <div class="btn-box">
      <div class="tip-box">
        <div>当前keyValue值为: <span style="color: blue;">{{ keyValue }}</span></div>
        <span>keyValue为true时，选项改变时，返回数据类型为带详细数据的对象类型，为false时，仅返回值。</span>
      </div>
      <van-button type="info" size="large" @click="keyValue=!keyValue">{{keyValue ?  "keyValue设置为false" : "keyValue设置为true" }}</van-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      keyValue: false, // 是否keyValue
      baseForm1: {
        name: "沈小布", // 姓名
        sex: "0", // 性别
        nation: "1", // 民族
        idCard: "350624199905201314", // 身份证号
        birthday: "1999-05-20", // 出生年月日
        followDate: "2013-01-04", // 关注日期
        mobile: "18885201314", // 手机号
        area: "111", // 所属地区
        colors: ["1", "2"], // 喜爱的颜色
        sports: ["1", "2"] // 喜爱的运动
      },
      sexData: [
        {
          label: "男",
          value: "0"
        },
        {
          label: "女",
          value: "1"
        }
      ],
      nationData: [
        {
          label: "汉族",
          value: "1"
        },
        {
          label: "朝鲜族",
          value: "2"
        },
        {
          label: "满族",
          value: "3"
        },
        {
          label: "回族",
          value: "4"
        },
        {
          label: "蒙古族",
          value: "6"
        }
      ],
      areaTreeData: [
        {
          "deptId": "1",
          "parentId": "2",
          "deptName": "福建省",
          "children": [
            {
              "deptId": "110",
              "parentId": "1",
              "deptName": "厦门市",
              "children": []
            },
            {
              "deptId": "111",
              "parentId": "1",
              "deptName": "漳州市",
              "children": []
            },
            {
              "deptId": "112",
              "parentId": "1",
              "deptName": "泉州市",
              "children": []
            }
          ]
        },
        {
          "deptId": "109",
          "parentId": "2",
          "deptName": "广东省",
          "children": [
            {
              "deptId": "113",
              "parentId": "109",
              "deptName": "深圳市",
              "children": []
            }
          ]
        }
      ],
      colorData: [
        {
          label: "红色",
          value: "1"
        },
        {
          label: "橙色",
          value: "2"
        },
        {
          label: "黄色",
          value: "3"
        }
      ],
      sportsData: [
        {
          text: "篮球",
          code: "1"
        },
        {
          text: "足球",
          code: "2"
        },
        {
          text: "排球",
          code: "3",
          disabled: true
        },
        {
          text: "网球",
          code: "4"
        },
        {
          text: "羽毛球",
          code: "5"
        },
        {
          text: "乒乓球",
          code: "6"
        }
      ],
      sportFormat: {
        label: "text",
        value: "code",
        disabled: "disabled"
      }
    }
  },
  methods: {
    // 选项改变事件
    handleChange(val) {
      console.log("🚀 ~ handleChange ~ val:", val)
    }
  }
}
</script>
<style scoped lang="less">
.btn-box{
  padding: 0 16px;
  margin-top: 100px;
}

.tip-box{
  background: #ff976a;
  color: #fff;
  margin-bottom: 12px;
  border-radius: 8px;
  padding: 6px;
  font-size: 14px;
}

.van-radio__label--disabled, .van-checkbox__label--disabled{
  color: unset !important;
}
</style>